<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>应用快速跳转</title>
        <style>
            body {
                font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                margin: 0;
                padding: 20px;
                background-color: #f7f7f7;
            }

            .app-container {
                width: 100%;
                max-width: 400px;
            }

            .app-btn {
                display: flex;
                align-items: center;
                width: 100%;
                padding: 15px 20px;
                margin-bottom: 15px;
                border: none;
                border-radius: 12px;
                font-size: 16px;
                font-weight: bold;
                color: white;
                cursor: pointer;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                transition: all 0.3s;
            }

            .app-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            }

            .app-btn:active {
                transform: translateY(0);
            }

            .app-icon {
                width: 24px;
                height: 24px;
                margin-right: 15px;
            }

            .meituan-btn {
                background-color: #ffc300;
            }

            .meituan-btn:hover {
                background-color: #ffaa00;
            }

            .alipay-btn {
                background-color: #1677ff;
            }

            .alipay-btn:hover {
                background-color: #1261d1;
            }

            .douyin-btn {
                background-color: #000;
            }

            .douyin-btn:hover {
                background-color: #333;
            }

            .dianping-btn {
                background-color: #f03d37;
            }

            .dianping-btn:hover {
                background-color: #d32f2f;
            }

            .alert {
                display: none;
                padding: 15px;
                background-color: #f8f9fa;
                color: #333;
                border: 1px solid #ddd;
                border-radius: 8px;
                width: 100%;
                margin-top: 10px;
                text-align: center;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            }

            .download-link {
                color: #1677ff;
                text-decoration: none;
                font-weight: bold;
                margin-left: 5px;
            }

            .title {
                font-size: 24px;
                font-weight: bold;
                margin-bottom: 30px;
                color: #333;
            }

            #JweixinTip {
                position: fixed;
                background-color: rgba(0, 0, 0, 0.7);
                width: 100%;
                height: 100%;
                color: #fff;
                align-items: center;
                justify-content: center;
                text-align: center;
                line-height: 30px;
            }
        </style>
    </head>
    <body>
        <div class="app-container">
            <div class="title">应用快速跳转</div>

            <!-- 美团按钮 -->
            <button class="app-btn meituan-btn" onclick="openApp('meituan')">
                打开美团
            </button>

            <!-- 抖音按钮 -->
            <button class="app-btn douyin-btn" onclick="openApp('douyin')">
                打开抖音
            </button>

            <!-- 大众点评按钮 -->
            <button class="app-btn dianping-btn" onclick="openApp('dianping')">
                打开大众点评
            </button>
        </div>
        <div class="wxtip" id="JweixinTip" style="display:none;">
            <span class="wxtip-icon"></span>
            <p>点击右上角<br />选择在浏览器中打开</p>
        </div>
        <script>
            var ua = navigator.userAgent.toLowerCase();
            if (ua.match(/micromessenger/i) == "micromessenger") {
                document.getElementById('JweixinTip').style.display = 'flex';
            }

			const dianpingUrl="dianping://picassobox?source=outside&notitlebar=true&shopuuid=G1vLOqcdTSpAwpGi&id=995266305&shoptype=10&cityid=8&lch=poinoterouter&utm_source=poinoterouter"
            
			// 应用配置信息
            const apps = {
                meituan: {
                    scheme: 'imeituan://',
                    webUrl: 'https://www.meituan.com/',
                    alertId: 'meituanAlert'
                },
                douyin: {
                    scheme: 'snssdk1128://',
                    webUrl: 'https://www.douyin.com/',
                    alertId: 'douyinAlert'
                },
                dianping: {
                    scheme: dianpingUrl,//'dianping://home',
                    webUrl: 'https://www.dianping.com/',
                    alertId: 'dianpingAlert'
                }
            };

            function openApp(appName) {
                const app = apps[appName];
                if (!app) return;

                // 隐藏所有提示
                document.querySelectorAll('.alert').forEach(el => {
                    el.style.display = 'none';
                });

                // 尝试打开应用
                window.location.href = app.scheme;

                // 设置标志检测是否跳转成功
                let appInstalled = false;

                // 监听页面visibility变化
                document.addEventListener('visibilitychange', function() {
                    if (document.hidden) {
                        appInstalled = true;
                    }
                });

                // 如果APP未安装，显示提示
                // setTimeout(function() {
                //     if (!appInstalled) {
                //         document.getElementById(app.alertId).style.display = 'block';
                //     }
                // }, 1000); // 1秒后检测
            }
        </script>
    </body>
</html>